<template>
	<uv-popup class="m-navbar_drawer" overlayOpacity='0' ref="refInfo" mode="right" closeIconPos="top-left" :closeable="true">
		<view class="app-container" :style="{'--user-drawer-width': drawerWidth+'px'}">
			<view class="logo">
				<image class="icon_logo" src="@/static/logo.png" mode=""></image>
			</view>
			<view class="setUp_name">
				{{appName}}
			</view>
			<view class="setUp_version">
				当前版本 {{version}}
			</view>
			<view class="check-btn" @click="checkVersion">
				检查更新
			</view>
			<view class="check-btn" @click="getAppDownloadUrl">
				下载APP
			</view>
		</view>
	</uv-popup>
	<uv-popup ref="refQrcodePopup" mode="center">
		<uv-qrcode ref="refQrcode" :value="qcUrl" :options="qrcodeOp">
			<template v-slot:loading>
			    <view class="qrcode-loading"></view>
			</template>
		</uv-qrcode>
	</uv-popup>
</template>

<script setup name="appSysInfo">
    import { computed, ref, inject } from 'vue';
	import logo from '@/static/logo.png';
	import hotupdate from "@/api/hotupdate.js"
	
	const refInfo = ref(null)
	const refQrcodePopup = ref(null)
	const refQrcode = ref(null)
	
	const version = ref(uni.$uv.sys().appVersion)
	const qcUrl = ref(null)
	const qrcodeOp = ref({
		size: uni.upx2px(360),
		useDynamicSize: true,
		errorCorrectLevel: 'Q',
		margin: 10,
		areaColor: "#FFF",
		backgroundColor: "#FFF",
		// 指定二维码前景，一般可在中间放logo
		foregroundImageSrc: logo
	})
	
	const drawerWidth = computed(() => {
		return uni.upx2px(584)
	})
	
	const appName = computed(() => {
		const { appName } = inject('global')
		return appName
	})
	
	const open = () => {
		refInfo.value.open();
	}
	// 检查版本更新
	const checkVersion = () => {
		// #ifdef APP-PLUS
		plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
			uni.setStorageSync("curversion", widgetInfo.version)
			let curversion = widgetInfo.version;
			hotupdate.getAppByVersion(curversion, false)
		})
		// #endif
	}
	// 获取下载链接
	const getAppDownloadUrl= () =>{
		let query = {};
		if (uni.getSystemInfoSync().platform == "ios") {
			query = {
				type: 2,
				version: uni.getSystemInfoSync().appVersion,
			};
		} else {
			query = {
				type: 1,
				version: uni.getSystemInfoSync().appVersion,
			};
		}
		
		hotupdate.getVersion(query).then(res=> {
			let result = res.msg; 
			if (result != '已是最新版本') {
				qcUrl.value = res.data
			} else {
				qcUrl.value = res.data
			}
			refQrcodePopup.value.open()
		})
	}
	defineExpose({
		open
	})
</script>

<style lang="scss" scoped>
	.app-container {
		height: 100%;
		width: var(--user-drawer-width);
		padding-top:  var(--status-bar-height);
		position: relative;
	}
	.logo {
		margin: 50rpx 0 26rpx;
		text-align: center;
		.icon_logo {
			width: 96rpx;
			height: 96rpx;
			margin: 0 auto;
		}
	}
	.setUp_name,
	.setUp_version {
		text-align: center;
		font-size: 32rpx;
		font-weight: 400;
		color: $uv-main-color;
		line-height: 25rpx;
	}
	.setUp_version {
		margin: 36rpx 0 70rpx;
		font-size: 28rpx;
		color: $uv-tips-color;
	}
	.check-btn {
		text-align: center;
		width: 80%;
		height: 48rpx;
		line-height: 48rpx;
		color: #fff;
		background-color: $uv-primary;
		padding: 12rpx;
		border-radius: 12rpx;
		margin: 0 auto 30rpx;
	}
	.qrcode-loading {
		width: 2.5em;
	    height: 3em;
	    border: 3px solid transparent;
	    border-top-color: $uv-primary;
	    border-bottom-color: $uv-primary;
	    border-radius: 50%;
	    animation: spin-stretch 2s ease infinite;

		@keyframes spin-stretch {
		  50% {
		    transform: rotate(360deg) scale(0.4, 0.33);
		    border-width: 8px;
		  }
		  100% {
		    transform: rotate(720deg) scale(1, 1);
		    border-width: 3px;
		  }
		}
	}
</style>